<template>
  <div class="container">
    <a-table
      style="width:90%;margin:0 auto;margin-top:5vh;"
      :pagination="false"
      :columns="columns"
      :dataSource="dataList"
      bordered
      :rowKey="record => record.id"
    >
      <template slot="name" slot-scope="text">
        <span>{{text}}</span>
      </template>
      <template slot="money" slot-scope="record">
        <a-tooltip>
          <template slot="title">{{record.money}}</template>
          <span>{{record.money | nameListFilter}}</span>
        </a-tooltip>
      </template>
      <template slot="list" slot-scope="record">
        <span>{{record.percent}}%</span>
      </template>
      <template slot="status" slot-scope="record">
          <span v-if="record.status"></span>
        <span v-if='paySubPlanDTO.status == "pass"'>正常</span>
        <span v-else-if='paySubPlanDTO.status == "freeze"'>冻结</span>
        <span v-else>未知</span>
      </template>
      <template slot="action" slot-scope="record">
        <a-button @click="downLoad(record.protocolPath)">下载</a-button>
      </template>
    </a-table>
    <div style="width:90%;margin:15px auto;">
      <a-button type="primary" v-if="paySubPlanDTO.id" class="addItem" @click="goModify">修改分账名单</a-button>
    </div>
  </div>
</template>


<script>
const columns = [
  {
    title: "会员编号",
    dataIndex: "targetMemberNo",
    align: "center"
  },
  {
    title: "客户全称",
    dataIndex: "targetMemberName",
    align: "center"
  },
  {
    title: "分账比例",
    scopedSlots: { customRender: "list" },
    align: "center"
  },
  {
    title: "开通时间",
    dataIndex: "ctime",
    align: "center"
  },
  {
    title: "状态",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "协议",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];
import { message } from "ant-design-vue";
import api from "@/common/api";
import { mapState } from "vuex";
export default {
  name: "newReceipt",
  data() {
    return {
      columns,
      dataList: [],
      paySubPlanDTO: {}
    };
  },
  filters: {
    nameListFilter(value) {
      if (value.length > 16) {
        return value.substring(0, 16) + "...";
      }
      return value;
    }
  },
  computed: {
    ...mapState({
      imageSize: state => state.imageSize
    })
  },
  created() {},
  mounted() {},
  activated() {
    this.getReceiptListQuery();
    this.judeSubmitReceipt();
  },
  watch: {},
  methods: {
    judeSubmitReceipt() {
      if (sessionStorage.getItem("isverify") == "false") {
        let data = {};
        api.judeSubmitReceipt(
          data,
          res => {
            if (res.code == "OK") {
              this.isverify = true;
              sessionStorage.setItem("isverify", true);
            } else {
              this.isverify = false;
              sessionStorage.setItem("isverify", false);
            }
          },
          err => {
            console.log("err", err);
          }
        );
      } else {
      }
    },
    getReceiptListQuery() {
      let data = {
        data: "11",
        page: 1,
        pageSize: 10
      };
      api.ReceiptListQuery(
        data,
        res => {
          if (res.code == "OK") {
            console.log(res.data);
            this.dataList = res.data.paySubPlanTargetDTOList;
            this.paySubPlanDTO = res.data.paySubPlanDTO;
          }
        },
        err => {}
      );
    },
    getListDivHeight() {
      let aaa = setTimeout(function() {
        let listDiv = document.getElementById("listDiv");
        console.log(listDiv.offsetHeight);
        console.log(listDiv.clientHeight);
        let H = ((document.body.clientHeight * 100) / 10000) * 65;
        console.log(H);
        if (listDiv.offsetHeight > H) {
          listDiv.style.height = "65vh";
        }
      }, 10);
    },
    downLoad(protocolPath) {
      window.location.href = "/file/file/download/" + protocolPath;
    },
    goModify() {
      this.$router.push({
        path: "/newReceipt",
        query: { modify: "update", id: this.paySubPlanDTO.id }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 40px;
}

tr .column-money,
tr .column-money {
  text-align: right !important;
}

#listDiv {
  overflow-y: auto;
}

/*滚动条样式*/
#listDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

#listDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

#listDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.listDiv:nth-child(even) {
  background: #eee;
}

.nodata {
  margin: 20vh auto;
  text-align: center;
}
/deep/.ant-table-thead > tr > th > {
  color: #52506b;
}
</style>